<template>
  <div>
    <van-nav-bar
      title="特产"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-image
          round
          width="1rem"
          height="1rem"
          fit="contain"
          :src="this.userInfo.photo"
        />
      </template>
    </van-nav-bar>
    <ul v-for="(value, index) in foods" :key="index">
      <li>
        <h1>{{ value.title }}</h1>
      </li>
      <li><img :src="value.imgsrc" alt="" /></li>
      <li>{{ value.text }}</li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      foods: [],
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
    };
  },
  created() {
    /* console.log(this.userInfo); */
    axios
      .get(
        "https://mock.mengxuegu.com/mock/6142955121805563ee103334/example/foodsList"
      )
      .then((res) => {
        /* console.log(res.data.data.foods); */
        this.foods = res.data.data.foods;
      });
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
li {
  margin-left: 2%;
  margin-top: 4%;
  width: 96%;
  background-color: rgb(248, 248, 248);
  border-radius: 4%;
  box-shadow: 1px 1px 3px gray;
}
img {
  width: 100%;
}
h1 {
  font-size: 18px;
}
</style>
